<template>
	<el-card class="box-card">
		<el-row style="line-height: 60px;font-size: 18px;">
			<el-col :span="20">活动列表</el-col>
			<el-col :span="4" align="right"><el-button type="primary" @click="add">添加</el-button></el-col>
		</el-row>
		<el-table :data="tableData" border stripe style="width: 100%;">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column prop="courseName" label="活动名称">
			</el-table-column>
			<el-table-column prop="ownerName" label="商户名称">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column prop="courseStatus" label="活动状态">
				<template slot-scope="scope">
					<span v-show="scope.row.courseStatus == 0" >待完善</span>
					<span v-show="scope.row.courseStatus == 1" >待上架</span>
					<span v-show="scope.row.courseStatus == 2" >上架</span>
					<span v-show="scope.row.courseStatus == 3" >下架</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button size="small" icon="el-icon-edit" type="success" v-show="scope.row.courseStatus == 1 || scope.row.courseStatus == 3" @click="updateStatus(scope.row.id,2)">上架</el-button>
					<el-button size="small" icon="el-icon-edit" type="primary" v-show="scope.row.courseStatus == 2" @click="updateStatus(scope.row.id,3)">下架</el-button>
					<el-button size="small" icon="el-icon-edit" type="warning" v-show="scope.row.courseStatus != 2" @click="modify(scope.row)">编辑</el-button>
					<el-button size="small" icon="el-icon-delete" type="danger" v-show="scope.row.courseStatus != 2" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next" :total="count">
		</el-pagination>
		
	</el-card>
</template>

<script>
	import { courseList, courseDelete,updateStatus} from "@/api/getData"
	export default {
		data() {
			return {
				findForm: {
					name: '',
					typeId: "4",
				},
				tableData: [],
				limit: 10,
				count: 0,
				currentPage: 1,
				businessId:"",
			};
		},
		created() {
			this.businessId = this.$route.query.id;
			this.initData();
		},
		methods: {
			async initData() {
				try {
					let userId = this.$store.getters.getUser.userId;
					let userName = this.$store.getters.getUser.username;
					const returnData = await courseList({
						pageNum: this.currentPage.toString(),
						pageSize: this.limit.toString(),
						bdId: userName == "admin" ? "" : userId,
						courseOwner: this.businessId
					});
					if(returnData.code == "0") {
						this.tableData = returnData.list.rows;
						this.count = Number(returnData.list.total);
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.initData();
			},
			async handleDeleteData(index, row) {
				try {
					let returnData = await courseDelete({
						id: row.id
					});
					if(returnData.code == "0") {
						this.tableData.splice(index, 1);
						this.$message({
							message: "删除成功！",
							type: 'success'
						});
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			handleDelete(index, row) {
				this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleDeleteData(index, row);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除操作'
					});
				});

			},
			add() {
				this.$router.push({
					path: 'activityOne',
					query: {
						businessId: this.businessId
					}
				})
			},
			async updateStatus(id,status){
				try {
					let returnData = await updateStatus({
						id: id,
						courseStatus:status
					});
					if(returnData.code == "0") {
						this.initData();
						this.$message({
							message: "操作成功",
							type: 'success'
						});
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			modify(row) {
				if(row.currentStep == 1){
					this.$router.push({
						path: 'activityTwo',
						query: {
							id: row.id,
							businessId: this.businessId
						}
					})
				}else if(row.currentStep == 2){
					this.$router.push({
						path: 'activityThree',
						query: {
							id: row.id,
							businessId: this.businessId
						}
					})
				}else if(row.currentStep == 3){
					this.$router.push({
						path: 'activityFour',
						query: {
							id: row.id,
							businessId: this.businessId
						}
					})
				}else if(row.currentStep == 4){
					this.$router.push({
						path: 'activityFive',
						query: {
							id: row.id,
							businessId: this.businessId
						}
					})
				}else if(row.currentStep == 5){
					this.$router.push({
						path: 'activitySix',
						query: {
							id: row.id,
							businessId: this.businessId
						}
					})
				}else if(row.currentStep == 6){
					this.$router.push({
						path: 'activityOne',
						query: {
							id: row.id,
							businessId: this.businessId
						}
					})
				}
				
			},

		}
	}
</script>

<style scoped>
.box-card{
	margin: 0 10px;
}

.page{
    text-align: right;margin-top:10px;padding:0px;
}

</style>